<template>
    <div>
        <vxe-table
                border
                ref="xTable"
                :row-config="{isHover: true}"
                :loading="loading"
                :data="tableData"
                stripe
                @checkbox-all="handleSelectionChange"
                @checkbox-change="handleSelectionChange"
                :edit-config="{trigger: 'manual', mode: 'row',autoClear: false}" >
            <vxe-column type="checkbox" width="60" v-if="Checkbox"></vxe-column>
            <template  v-for="(item, index) in tableDataColumn" >
                <vxe-column
                        v-if="item.sortable && item.filter"
                        :key="index"
                        :field="item.key"
                        :title="item.label"
                        :width="item.width"
                        :sortable="item.sortable"
                        :filters="[{ data: '' }]" :filter-method="filterAgeMethod" :filter-recover-method="filterAgeRecoverMethod">
                    <template #filter="{ $panel, column }">
                        <template v-for="(option, index) in column.filters">
                            <input class="my-input" type="type" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()" placeholder="按回车确认筛选">
                        </template>
                    </template>
                </vxe-column>
                <template  v-else>
                    <vxe-column
                            v-if="item.editFlag"
                            :key="index"
                            :width="item.width"
                            :edit-render="{}"
                            :title="item.label"
                            show-overflow>
                        <template #edit="{ row }">
                            <vxe-input v-model="row.pgSqsyse" type="text"></vxe-input>
                        </template>
                    </vxe-column>
                    <template  v-else>
                        <vxe-column
                                v-if="item.type=='btnCk'"
                                :key="index"
                                :field="item.key"
                                :title="item.label"
                                :sortable="item.sortable"
                                show-overflow>
                            <template slot-scope="scope" >
                                <slot name="btnCk" :row="scope.row" :index="scope.$index"/>
                            </template>
                        </vxe-column>
                        <vxe-column
                                v-if="item.type=='colors'"
                                :key="index"
                                :field="item.key"
                                :title="item.label"
                                :sortable="item.sortable"
                                show-overflow>
                            <template slot-scope="scope">
                                <!--想要变色-->
                                <span  :class="scope.row[item.key]=='启用'?'green-font':'red-font'"> {{ scope.row[item.key]}}</span>
                            </template>
                        </vxe-column>
                        <vxe-column
                                v-else
                                :key="index"
                                :field="item.key"
                                :title="item.label"
                                :sortable="item.sortable"
                                :width="item.width"
                                show-overflow>
                            <template slot-scope="scope">
                            <div v-if="item.type=='slot'">
                                <template>
                                    <slot name="publicSlot"  :row="scope.row" :keyName="item.key" :index="scope.$index" />
                                </template>
                            </div>
                                <div v-else> {{ scope.row[item.key] }}</div>
                            </template>
                        </vxe-column>
                    </template>
                </template>
            </template>
            <vxe-column title="操作" v-if="hideCz && hideZdy">
                <template slot-scope="scope">
                    <slot name="btnGroups" :row="scope.row" :index="scope.$index"/>
                </template>
            </vxe-column>
            <vxe-column title="操作"  v-if="!hideCz && hideZdy">
                <template #default="{ row }">
                    <template v-if="$refs.xTable.isEditByRow(row)">
                        <vxe-button  type="text" status="primary" @click="saveRowEvent(row)">保存</vxe-button>
                        <!--                                        <vxe-button  type="text"  status="warning" @click="cancelRowEvent(row)">取消</vxe-button>-->
                    </template>
                    <template v-else>
                        <vxe-button  type="text" status="primary" @click="editRowEvent(row)">编辑</vxe-button>
                        <vxe-button type="text" status="danger" @click="deleteRowEvent(row)"> 删除</vxe-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>
        <div class="fenye" v-if="ispagination && searjuery.total>0">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="searjuery.pageIndex"
                    :page-sizes="pageSizes"
                    :page-size="searjuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="searjuery.total">
            </el-pagination>


        </div>
    </div>
</template>

<script>
    import XEUtils from 'xe-utils'
    export default {
        name: 'index',
        props:{
            tableDataColumn: {
                type: Array,
                default() {
                    return [];
                },
            },
            Checkbox: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false,
            },
            hideCz:{
                type:Boolean,
                default:true
            },
            hideZdy:{
                type:Boolean,
                default:true
            },
            pageSizes: {
                type: Array,
                default() {
                    return [10, 20, 30, 40, 50, 100];
                },
            },
            ispagination: {
                type: Boolean,
                default: true,
            },
            searjuery: {
                type: Object,
                default() {
                    return {};
                },
            },
            tableData: {
                handler: function (val) {
                    this.$set(this.tableData, val);
                    // this.tableData = val
                },
                deep: true,
                immediate: true,
            },
        },
        data () {
            return {
            }
        },

        methods: {
            //点击每行触发，目前是为了表格单选
            handleRowClick(row){
                this.$emit("handleRowClick", row);
            },
            handleSizeChange(val) {
                this.$emit("handleSizeChange", val);
            },
            handleCurrentChange(val) {
                this.$emit("handleCurrentChange", val);
            },
            //多选触发
            handleSelectionChange(e){
                this.$emit("handleSelectionChange", e);
            },
            filterNameMethod ({ value, row, column }) {
                return XEUtils.toValueString(row.name).toLowerCase().indexOf(value) > -1
            },
            filterRoleMethod ({ option, row }) {
                return row.role === option.data
            },
            filterAgeMethod ({ option, row }) {
                return row.age === Number(option.data)
            },
            updateNameFilterEvent () {
                const xTable = this.$refs.xTable
                const column = xTable.getColumnByField('name')
                // 修改筛选列表，并默认设置为选中状态
                xTable.setFilter(column, [
                    { label: '包含 0', value: '0' },
                    { label: '包含 1', value: '1' },
                    { label: '包含 2', value: '2', checked: true },
                    { label: '包含 3', value: '3' },
                    { label: '包含 4', value: '4' }
                ])
                // 修改条件之后，需要手动调用 updateData 处理表格数据
                xTable.updateData()
            },
            filterNameEvent () {
                const xTable = this.$refs.xTable
                const column = xTable.getColumnByField('name')
                // 修改第二个选项为勾选状态
                const option = column.filters[1]
                option.checked = true
                // 修改条件之后，需要手动调用 updateData 处理表格数据
                xTable.updateData()
            },
            filterAgeEvent () {
                const xTable = this.$refs.xTable
                const column = xTable.getColumnByField('age')
                // 修改第一个选项为勾选状态
                const option = column.filters[0]
                option.data = '32'
                option.checked = true
                // 修改条件之后，需要手动调用 updateData 处理表格数据
                xTable.updateData()
            },
            filterAgeRecoverMethod ({ option }) {
                // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
                option.data = ''
            },
            //添加子项
            async insertEvent () {
                const $table = this.$refs.xTable
                const newRecord = { rowFlag:false}
                const { row: newRow } = await $table.insert(newRecord)
                await $table.setEditRow(newRow)
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/style.css";
    .vxe-table{margin-right: 10px}
    ::v-deep  .vxe-table--render-default.border--full .vxe-header--column{
        background: #daf2ed;
        color: #000000;
        font-weight: bold;
    }
    ::v-deep {
        .vxe-body--column {border-left: 1px solid rgba(167, 180, 183, 0.3) !important;
            border-bottom: 1px solid rgba(167, 180, 183, 0.3) !important;}
        th.vxe-header--column {font-style: normal;
            font-weight: 400;font-size: 14px;line-height: 17px;text-align: center;
            border-left: 1px solid rgba(167, 180, 183, 0.3) !important;
            border-bottom: 1px solid rgba(167, 180, 183, 0.3) !important;
            border-top: none;}
        .vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title {width: 100%;overflow: hidden;
            text-overflow: ellipsis;white-space: nowrap;}
        .vxe-header--column .vxe-resizable{ display: none}
    }

    ::v-deep .vxe-table--render-default
    .vxe-table--body-wrapper,
    .vxe-table--render-default
    .vxe-table--footer-wrapper,
    .vxe-table--render-default
    .vxe-table--header-wrapper {
        min-height: 48px !important;
    }
    .green-font{color: #2ac06d;
        position: relative;
        padding-left: 10px;
    &:before{
        top: 8px;
        left: 0;
        position: absolute;
        content: '';
        width: 5px;
        height: 5px;
        background:  #2ac06d;
        border-radius:50% ;
    }}
    .red-font{ color: #ff0000;
        position: relative;
        padding-left: 10px;
        &:before{
            top: 8px;
            left: 0;
            position: absolute;
            content: '';
            width: 5px;
            height: 5px;
            background:  #ff0000;
            border-radius:50% ;
        }}
</style>
